<template>
	<el-row>
		<el-col :span="1" ><el-button type="primary" v-if="ifop" @click="dialogVisible = true">添加</el-button></el-col>
		<el-col :span="10"></el-col>
		<el-col :span="8">
			<el-input  v-model="selecttext" placeholder="编号、姓名或部门名称" size="large">
			        <template #prefix>
			          <el-button @click="search" circle size="small" >
						<el-icon style="vertical-align: middle">
						        <Search />
						</el-icon>
						      
					  </el-button>
			        </template>
			</el-input>
		</el-col>
		<el-col :span="3" >
			<el-button  type="danger" v-if="ifselect" @click="selectUpdate" >删除选中</el-button>
		</el-col>
	</el-row>
	<el-divider border-style="double" />
			  <el-table :data="publicadd" stripe style="width: 100%" @selection-change="handleSelectionChange" @row-click="editrow">
			  	<el-table-column type="selection" v-if="ifop"  />
			      <el-table-column prop="userId" label="人员编号"  />
			      <el-table-column prop="userName" label="人员姓名"  />
			      <el-table-column prop="addressText" label="联系方式" />
			  	<el-table-column prop="userDept" label="所属部门" />
			  	<el-table-column prop="userPosition" label="人员职位" />
				<el-table-column label="操作"  v-if="ifop" >
					<el-button type="primary" size="small" @click="editclick">编辑</el-button>
				</el-table-column>
			  </el-table>
	
	<el-dialog v-model="dialogVisible" title="添加通讯录" width="30%" :before-close="handleClose">
	    <template #footer>
	      <span class="dialog-footer">
			<el-form :model="form" label-width="120px">
			    <el-form-item label="人员编号">
			      <el-input v-model="form.userId" style="width: 220px;"/>
			    </el-form-item>
				<el-form-item label="人员姓名">
				  <el-input v-model="form.userName" style="width: 220px;"/>
				</el-form-item>
				<el-form-item label="联系方式">
				  <el-input v-model="form.addressText" style="width: 220px;"/>
				</el-form-item>
				<el-form-item label="所属部门">
				   <el-select v-model="form.userDept" class="m-2" placeholder="Select">
				      <el-option
				        v-for="item in depts"
				        :key="item.deptName"
				        :label="item.deptName"
				        :value="item.deptName"
				      />
				   </el-select>
				</el-form-item>
				<el-form-item label="人员职位">
				  <el-input v-model="form.userPosition" style="width: 220px;"/>
				</el-form-item>
				 <el-button  @click="dialogVisible = false">取消</el-button>
				  <el-button type="primary" @click="formcommit">添加</el-button>
				
			  </el-form>
	      </span>
		 
	    </template>
		
	  </el-dialog>
	  
	  
	  <el-dialog v-model="edit" title="编辑通讯录" width="30%" :before-close="handleClose">
	      <template #footer>
	        <span class="dialog-footer">
	  		<el-form :model="updateform2" label-width="120px" >
	  		    <el-form-item label="人员编号">
	  		      <el-input v-model="updateform2.userId" :placeholder="updateform2.userId" style="width: 220px;"/>
	  		    </el-form-item>
	  			<el-form-item label="人员姓名">
	  			  <el-input v-model="updateform2.userName" :placeholder="updateform2.userName" style="width: 220px;"/>
	  			</el-form-item>
	  			<el-form-item label="联系方式">
	  			  <el-input v-model="updateform2.addressText" :placeholder="updateform2.addressText" style="width: 220px;"/>
	  			</el-form-item>
	  			<el-form-item label="所属部门">
	  			   <el-select v-model="updateform2.userDept" :placeholder="updateform2.userDept" class="m-2">
	  			      <el-option
	  			        v-for="item in depts"
	  			        :key="item.deptName"
	  			        :label="item.deptName"
	  			        :value="item.deptName"
	  			      />
	  			   </el-select>
	  			</el-form-item>
	  			<el-form-item label="人员职位">
	  			  <el-input v-model="updateform2.userPosition" :placeholder="updateform2.userPosition" style="width: 220px;"/>
	  			</el-form-item>
	  			 <el-button  @click="edit = false">取消</el-button>
	  			  <el-button type="primary" @click="editupdate">设置</el-button>
	  			
	  		  </el-form>
	        </span>
	  	 
	      </template>
	  	
	    </el-dialog>
</template>

<script>
	import qs from 'qs'
	export default{
		data(){
			return{
				
				dialogVisible:false,
				user:{},
				publicadd:[],
				ifop:false,
				depts:[],
				form :{
				  userId: '',
				  userName: '',
				  addressText: '',
				  userDept: '',
				  userPosition: '',
				  publicState: 1,
					  },
				updateform2:{},
				selectrow:[],
				selecttext:"",
				edit:false,
				ifselect:false
			}
		},
		methods:{
			search(){
				
				let that=this
				console.log(that.selecttext)
				var text=that.selecttext
				var rule={}
				if(that.depts.indexOf(text)>=0){
					rule.userDept=text
				}
				else if(that.isNumber(text)){
					rule.userId=text
				}
				else{
					rule.userName=text
				}
				console.log(rule)
				rule.publicState=1
				var str=qs.stringify(rule)
				that.$axios.get("http://localhost:8080/publicaddress/select?"+str).then(function(res){
					console.log(res)
					that.publicadd=res.data
				})
				//that.$router.go(0)
				
			},
			isNumber(s){
				if(s.indexOf("0")>=0){return true}
				if(s.indexOf("1")>=0){return true}
				if(s.indexOf("2")>=0){return true}
				if(s.indexOf("3")>=0){return true}
				if(s.indexOf("4")>=0){return true}
				if(s.indexOf("5")>=0){return true}
				if(s.indexOf("6")>=0){return true}
				if(s.indexOf("7")>=0){return true}
				if(s.indexOf("8")>=0){return true}
				if(s.indexOf("9")>=0){return true}
				return false
			},
			editupdate(){
				let that=this
				console.log(that.updateform2)
				
				let str=qs.stringify(that.updateform2)
				that.$axios.get("http://localhost:8080/publicaddress/update?"+str).then(function(res){
				})
				that.edit=false
				that.$router.go(0)
				
			},
			editclick(){
				this.edit=true
				console.log(this.updateform2)
			},
			editrow(arr){
				this.updateform2.userId=arr.userId
				this.updateform2.userName=arr.userName
				this.updateform2.addressText=arr.addressText
				this.updateform2.userDept=arr.userDept
				this.updateform2.userPosition=arr.userPosition
				this.updateform2.addressId=arr.addressId
				this.updateform2.publicState=1
			},
			selectUpdate(){
				let that=this
				for(let s in that.selectrow){
					var rule=that.selectrow[s]
					rule.publicState=0
					let str=qs.stringify(rule)
					that.$axios.get("http://localhost:8080/publicaddress/update?"+str).then(function(res){
					})
				}
				that.$router.go(0)
			},
			formcommit(){
				console.log(this.form)
				let that=this
				let str=qs.stringify(that.form)
				that.$axios.get("http://localhost:8080/publicaddress/insert?"+str).then(function(res){
				})
				that.dialogVisible=false;
				that.$router.go(0)
			},
			handleSelectionChange(arr,row){
				if(arr.length!=0){this.ifselect=true}
				else{this.ifselect=false}
				this.selectrow=arr
				console.log(this.selectrow)
			},
			
		},
		created(){
			let loginUser=JSON.parse(sessionStorage.getItem("user"))
			this.user=loginUser
			console.log(loginUser)
			if(loginUser.userPosition=="部门经理"){
				this.ifop=true
			}
			const rule={}
			rule.publicState=1
			let that=this
			var str=qs.stringify(rule)
			that.$axios.get("http://localhost:8080/publicaddress/select?"+str).then(function(res){
				console.log(res)
				that.publicadd=res.data
			})
			
			let insertdepts=JSON.parse(sessionStorage.getItem("publicneeddepts"))
			if(insertdepts!=null){
				that.depts=insertdepts
				console.log(insertdepts)
			}
			else{
				that.$axios.get("http://localhost:8080/department/list").then(function(res){
					console.log(res)
					sessionStorage.setItem("publicneeddepts",JSON.stringify(res.data))
					that.depts=res.data
					//that.publicadd=res.data
				})
			}
			//console.log(that.depts)
		}
	}
</script>

<style>
</style>
